<template>
  <div>
    <div class="header">
      <h1>申请状态</h1>
    </div>
    <div class="content">
      <a-table :columns="columns" rowKey="auditId" :data-source="records" bordered :pagination="false"
               :scroll="{ y: 450 }">
        <template slot="type" slot-scope="record">
          {{record.type}}
<!--          <a-steps :current="record.type">-->
<!--            <a-step>-->
<!--              &lt;!&ndash; <span slot="title">Finished</span> &ndash;&gt;-->
<!--              <template slot="title">-->
<!--                Finished-->
<!--              </template>-->
<!--              <span slot="description">This is a description.</span>-->
<!--            </a-step>-->
<!--            <a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />-->
<!--            <a-step title="Waiting" description="This is a description." />-->
<!--          </a-steps>-->
        </template>
        <template slot="action" slot-scope="record">
          <a @click="showDetails(record)">查看详情</a>
        </template>
      </a-table>
    </div>
    <a-modal title="勘误详情" @ok="handleOk" @cancel="handleCancel" :maskClosable="false" :visible="isShow"
             :confirm-loading="confirmLoading">
      <a-descriptions bordered style="text-align:center" size="small">
        <a-descriptions-item label="课程名称">
          {{ currentDetail.sessionName }}
        </a-descriptions-item>
        <a-descriptions-item label="教师名称">
          {{ currentDetail.teacherName }}
        </a-descriptions-item>
        <a-descriptions-item label="申请理由">
          {{ currentDetail.description }}
        </a-descriptions-item>
        <a-descriptions-item label="原上课周">
          {{ currentDetail.originWeek }}
        </a-descriptions-item>
        <a-descriptions-item label="原上课天">
          {{ currentDetail.originDay }}
        </a-descriptions-item>
        <a-descriptions-item label="原上课节">
          {{ currentDetail.originClass }}
        </a-descriptions-item>
        <a-descriptions-item label="原上课地点">
          {{ currentDetail.originLoc }}
        </a-descriptions-item>
        <template v-if="(currentDetail.type == 1)">
          <a-descriptions-item label="调整到上课周">
            {{ currentDetail.newWeek }}
          </a-descriptions-item>
          <a-descriptions-item label="调整到上课天">
            {{ currentDetail.newDay }}
          </a-descriptions-item>
          <a-descriptions-item label="调整到上课节">
            {{ currentDetail.newClass }}
          </a-descriptions-item>
          <a-descriptions-item label="调整到上课地点">
            {{ currentDetail.newLoc }}
          </a-descriptions-item>
        </template>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
import getAuditionInfo from '@/api/audition/getAuditionInfo';
import {columns} from '@/pages/teacher/js/columns';
import getDetail from '@/api/audition/getAuditDetails';

export default {

  data() {
    return {
      records: [],
      columns: [],
      currentRecord: {},
      currentDetail: {},
      isShow: false,
      confirmLoading: false,
    }
  },
  mounted() {
    this.getAuditionInfo();
    this.columns = columns.auditionColumns;
  },
  methods: {
    async getAuditionInfo() {
      let self = this;
      await getAuditionInfo().then(res => {
        if (res.result) {
          self.records = res.data.records;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    async showDetails(record) {
      let self = this;
      await getDetail(record.auditId).then(res => {
        if (res.result) {
          self.isShow = true;
          self.currentDetail = res.data;
          self.currentRecord = record;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    handleOk() {
      this.clear();
    },
    handleCancel() {
      this.clear();
    },
    clear() {
      this.currentRecord = {};
      this.isShow = false;
    }
  }

}


</script>
<style scoped src="./css/common.css"></style>